
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>有两个页面都登录了，在其中一个页面登录后进行了密码修改，另一个页面有啥影响 - 学习卡片</title>
      <style>
        body { font-family: sans-serif; background-color: #f0f8ff; color: #333; display: flex; flex-direction: column; align-items: center; padding: 50px 20px; }
        .header h1 { font-size: 32px; }
        .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; max-width: 1200px; }
        .card-container { perspective: 1200px; cursor: pointer; height: 250px; }
        .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.7s; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
        .card-container.flipped .card { transform: rotateY(180deg); }
        .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; box-sizing: border-box; border-radius: 16px; background-color: #fff; padding: 24px; }
        .card-back { background-color: #f0fff4; transform: rotateY(180deg); justify-content: space-between; }
        .card-category { font-size: 14px; color: #0052d9; margin-bottom: 8px; font-weight: 500; }
        .card-question { font-size: 20px; font-weight: 500; flex-grow: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
        .card-answer-wrapper { flex-grow: 1; overflow-y: auto; }
        .card-answer { font-size: 15px; line-height: 1.7; }
        .card-footer { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 16px; margin-top: 16px; }
        .card-source { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 12px; margin-top: 12px; }
      </style>
    </head>
    <body>
      <div class="header">
        <h1>有两个页面都登录了，在其中一个页面登录后进行了密码修改，另一个页面有啥影响 - 学习卡片</h1>
      </div>
      <div class="grid-container">
        
    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">理论</div>
          <div class="card-question">Web应用中用于管理用户登录状态的两种主要凭证是什么？它们的核心区别在哪里？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">理论</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">两种主要凭证是会话（Session）和令牌（Token）。核心区别在于状态存储的位置：会话信息通常存储在服务器端，通过唯一的会话ID来标识；而令牌（如JWT）通常由服务器生成后返回给客户端存储，客户端在后续请求中携带它来验证身份。</div>
          </div>
          <div class="card-source">来源: 1.1 会话管理的基本概念</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">当用户修改密码时，为什么通常会导致已登录的其他页面会话失效？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">因为从安全角度考虑，密码修改操作通常会触发会话管理系统将与旧密码相关的会话标记为失效。这样，当用户在其他页面进行操作时，其请求会因为会话无效而失败，系统会要求用户使用新密码重新登录以建立新的会话。</div>
          </div>
          <div class="card-source">来源: 1.2 密码修改对会话的影响</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">对于使用令牌（如JWT）进行身份验证的系统，在密码修改后如何确保旧令牌不再有效？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">由于JWT等令牌在有效期内通常不会自动失效，系统需要在密码修改后，通过在服务器端维护一个“令牌黑名单”来使旧令牌失效。当收到请求时，服务器会检查令牌是否在该黑名单中，从而阻止其继续使用。</div>
          </div>
          <div class="card-source">来源: 3.2 令牌失效与更新</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">实践</div>
          <div class="card-question">在分布式系统中，当用户修改密码需要使会话失效时，应如何确保所有服务节点都同步了该状态？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">实践</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">在分布式环境中，必须确保所有服务节点都能同步会话失效的信息。这通常通过一个集中的分布式缓存系统（如Redis）来实现，用它来统一管理和同步所有节点的会话状态。</div>
          </div>
          <div class="card-source">来源: 3.1 实现会话失效机制</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">安全</div>
          <div class="card-question">在用户修改密码时，立即让所有旧会话和旧令牌失效主要能防范哪两种安全攻击？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">安全</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">主要能防范两种攻击：1. 会话劫持攻击，通过使旧会话ID无效，攻击者无法利用它进行未授权操作。2. 令牌重放攻击，通过将旧令牌加入黑名单，可以有效防止该令牌被恶意重放使用。</div>
          </div>
          <div class="card-source">来源: 5. 安全性保障</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">从用户体验的角度来看，当用户成功修改密码后，系统应提供哪些必要的反馈？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">系统应该提供两方面的反馈：1. 明确的成功提示，并告知用户所有设备上的会话可能已被终止或令牌将被更新。2. 当用户在其他页面的旧会话中尝试操作时，应提供清晰的重新登录提示，引导用户重新验证身份。</div>
          </div>
          <div class="card-source">来源: 4.1 用户通知</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">为什么说基于令牌（Token）的系统在密码修改后，可能不会“立即”影响到用户在其他页面的登录状态？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">因为令牌（尤其是JWT）是无状态的，其有效性仅取决于自身是否过期以及签名是否正确。除非服务器端实现了额外的机制（如令牌黑名单或强制刷新），否则一个尚未过期的旧令牌在密码修改后仍然会被认为是有效的，直到它自然过期。</div>
          </div>
          <div class="card-source">来源: 2.2 令牌机制</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">除了使用“令牌黑名单”，还有什么其他机制可以在密码修改后处理旧令牌？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">除了令牌黑名单，文档中提到的另一种机制是“自动令牌刷新”。系统可以设计成在密码修改后，当用户下一次发起请求时，强制更新用户的令牌，用一个新的、安全的令牌来替换旧的令牌。</div>
          </div>
          <div class="card-source">来源: 3.2 令牌失效与更新</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">安全</div>
          <div class="card-question">为什么说在密码修改时让旧会话失效是防止会话劫持的有效手段？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">安全</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">因为会话劫持攻击依赖于获取一个有效的会话ID。如果在用户修改密码时，服务器立即将所有与该用户相关的旧会话ID都标记为无效，那么即使攻击者之前已经窃取了会话ID，也无法再利用它通过服务器的验证，从而有效阻止了攻击。</div>
          </div>
          <div class="card-source">来源: 5.1 防止会话劫持</div>
        </div>
      </div>
    </div>

      </div>
    </body>
    </html>
